<template>
    <div>
        <!-- 顶部 -->

        <!-- 内容导航 -->
        <div class="nav warp">
            <div class="nav-l">
                <img src="../assets/img/indexLogo.6f8ac4f0.png" alt="" width="256px" height="56px">
            </div>
            <div class="nav-m">
                <span @click="$router.push('/home')" :class="{active:$route.path=='/home'}">首页</span>
                <span @click="$router.push('/goods')" :class="{ active: $route.path == '/goods' }">全部商品</span>
                <span @click="$router.push('/user')" :class="{ active: $route.path == '/user' }">个人中心</span>
                <span @click="$router.push('/order')" :class="{ active: $route.path == '/order' }">我的订单</span>
                <span @click="$router.push('/free')" :class="{ active: $route.path == '/free' }">专属福利</span>
            </div>
            <div class="nav-r">
                <input type="text">
                <div>
                    <img src="../assets/img/search.png" alt="">
                </div>

            </div>
        </div>
    </div>
</template>

<script>
// @ is an alias to /src
// import { JingpingAPI } from "../api/api";
import {userProfilesAPI} from "../api/api"


export default {
    name: 'HomeView',
    async created() {
        // JingpingAPI().then(res => {
        //     console.log(res);
        // })
       
    // let token=localStorage.getItem("x-auth-token")
   let res=await userProfilesAPI()
   console.log("res",res);
       
  
    }

}
</script>

<style lang="less" scoped>
.warp {
    height: 100%;
    width: 73%;
    // background-color: #cfc;
    margin: auto;


}

.nav {
    display: flex;
    justify-content: space-between;


    .nav-m {
        line-height: 78px;
        display: flex;
        width: 500px;
        justify-content: space-between;

    }

    .nav-r {
        display: flex;
        align-items: center;


        input {
            outline: none;
            width: 214px;
            height: 40px;
            border: 1px solid #DEDEDE;
            border-radius: 20px 0px 0px 20px;
        }

        div {
            width: 50px;
            height: 40px;
            background: #0A328E;
            border-radius: 0px 20px 20px 0px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 15px;
                height: 15px;


            }
        }



    }
}

.active {
    color: #0a328e;
    font-weight: bold;
}

* {
    margin: 0px;
    padding: 0px;
}
</style>
